import { createRouter, createWebHistory } from 'vue-router';
import Layout from "@/view/HomePage/index.vue"


// 1. 定义路由规则
const routes = [
    // 基本路由
    {
        path: '/',
        name: 'Home',
        component: () => import('/src/view/HomePage/index.vue') // 懒加载[3,5](@ref)
    },
    {
        path: '/page',
        component : Layout,
        children: [
            {
                path: 'page1',
                name: 'page1',
                component: () => import('/src/view/page1/index.vue') // 懒加载[3,5](@ref)
            },
            {
                path: 'page2',
                name: 'page2',
                component: () => import('/src/view/page2/index.vue') // 懒加载[3,5](@ref)
            }
        ]
    },
    // {
    //     path: '/about',
    //     name: 'About',
    //     component: () => import('@/views/About.vue')
    // },
    //
    // // 动态路由（带参数）
    // {
    //     path: '/user/:id',
    //     name: 'User',
    //     component: () => import('@/views/User.vue'),
    //     props: true // 将参数作为组件 props 传递[1](@ref)
    // },
    //
    // // 嵌套路由
    // {
    //     path: '/dashboard',
    //     component: () => import('@/layouts/Dashboard.vue'),
    //     children: [
    //         {
    //             path: '', // 默认子路由
    //             name: 'Dashboard',
    //             component: () => import('@/views/Dashboard/Index.vue')
    //         },
    //         {
    //             path: 'settings',
    //             name: 'Settings',
    //             component: () => import('@/views/Dashboard/Settings.vue')
    //         }
    //     ]
    // },
    //
    // // 404 处理（必须放在最后）
    // {
    //     path: '/:pathMatch(.*)*',
    //     component: () => import('@/views/NotFound.vue')
    // }
];

// 2. 创建路由实例
const router = createRouter({
    history: createWebHistory(), // 使用 HTML5 History 模式[2,5](@ref)
    routes,

    // 可选：滚动行为控制
    scrollBehavior(to, from, savedPosition) {
        return savedPosition || { top: 0 } // 返回页面时恢复滚动位置
    }
});



export default router;